import { useEffect, useRef, useState } from 'react';

export function WxOpenLaunchWeapp() {
  const launchWeapp = useRef(null);
  const [username, setUsername] = useState('gh_e69b84eeec4c');
  const [path, setPath] = useState('pages/index/index.html');

  useEffect(() => {
    const ready = (e) => {
      // 无返回值
      console.log('ready', e.detail);
    };
    const launch = (e) => {
      console.log('launch', e.detail);
    };
    const error = (e) => {
      console.log('fail', e.detail);
    };
    launchWeapp.current.addEventListener('ready', ready);
    launchWeapp.current.addEventListener('launch', launch);
    launchWeapp.current.addEventListener('error', error);
    return () => {
      if (launchWeapp && launchWeapp.current) {
        launchWeapp.current.removeEventListener('ready', ready);
        launchWeapp.current.removeEventListener('launch', launch);
        launchWeapp.current.removeEventListener('error', error);
      }
    };
  }, []);
  return (
    <>
      <wx-open-launch-weapp
        ref={launchWeapp}
        id="launch-btn"
        username={username}
        path={path}
        style={{ width: '100%' }}
      >
        <script type="text/wxtag-template">
          <style>
            {`
                        button.btn {
                            border-width: 0;
                            outline: 0;
                            -webkit-appearance: none;
                        }
                        .btn {
                            position: relative;
                            display: block;
                            width: 100%;
                            margin-left: auto;
                            margin-right: auto;
                            padding: 8px 24px;
                            box-sizing: border-box;
                            font-weight: 700;
                            font-size: 17px;
                            text-align: center;
                            text-decoration: none;
                            color: #fff;
                            line-height: 1.88235294;
                            border-radius: 8px;
                            -webkit-tap-highlight-color: rgba(0,0,0,0);
                            background-color: #07c160;
                        }
                        `}
          </style>
          <button className="btn">打开小程序</button>
        </script>
      </wx-open-launch-weapp>
    </>
  );
}

export function WxOpenLaunchApp() {
  const launchApp = useRef(null);
  const [appid, setUsername] = useState('gh_e69b84eeec4c');
  const [path, setPath] = useState('pages/index/index.html');

  useEffect(() => {
    const ready = (e) => {
      // 无返回值
      console.log('ready', e.detail);
    };
    const launch = (e) => {
      console.log('launch', e.detail);
    };
    const error = (e) => {
      console.log('fail', e.detail);
    };
    launchApp.current.addEventListener('ready', ready);
    launchApp.current.addEventListener('launch', launch);
    launchApp.current.addEventListener('error', error);
    return () => {
      if (launchApp && launchApp.current) {
        launchApp.current.removeEventListener('ready', ready);
        launchApp.current.removeEventListener('launch', launch);
        launchApp.current.removeEventListener('error', error);
      }
    };
  }, []);
  return (
    <>
      <wx-open-launch-weapp
        ref={launchApp}
        id="launch-btn"
        username={appid}
        path={path}
        style={{ width: '100%' }}
      >
        <script type="text/wxtag-template">
          <style>
            {`
                        button.btn {
                            border-width: 0;
                            outline: 0;
                            -webkit-appearance: none;
                        }
                        .btn {
                            position: relative;
                            display: block;
                            width: 100%;
                            margin-left: auto;
                            margin-right: auto;
                            padding: 8px 24px;
                            box-sizing: border-box;
                            font-weight: 700;
                            font-size: 17px;
                            text-align: center;
                            text-decoration: none;
                            color: #fff;
                            line-height: 1.88235294;
                            border-radius: 8px;
                            -webkit-tap-highlight-color: rgba(0,0,0,0);
                            background-color: #07c160;
                        }
                        `}
          </style>
          <button className="btn">打开小程序</button>
        </script>
      </wx-open-launch-weapp>
    </>
  );
}

export function WxOpenSubscribe(props) {
  console.log(props);
  const [templateIds, setTemplateIds] = useState(
    'mW2ahEw7AQ5iVoEBn2LmcPeT4-XgFXA9Z5XJps-y1js,a_V6I8OF5Ekvch9ozW7YP3c-XQDQPRO3O1GndI9IEMg',
  );

  const subscribe = useRef(null);

  useEffect(() => {
    const success = (e) => {
      console.log('success', e.detail);
    };
    const error = (e) => {
      console.log('fail', e.detail);
    };
    subscribe.current.addEventListener('success', success);
    subscribe.current.addEventListener('error', error);
    return () => {
      if (subscribe && subscribe.current) {
        subscribe.current.removeEventListener('success', success);
        subscribe.current.removeEventListener('error', error);
      }
    };
  }, []);

  return (
    <>
      <wx-open-subscribe
        ref={subscribe}
        style={{ width: '100%' }}
        className={props.className}
        template={templateIds}
        id="subscribe-btn"
      >
        <script type="text/wxtag-template" slot="style">
          <style>
            {`
                button.subscribe-btn {
                    border-width: 0;
                    outline: 0;
                    -webkit-appearance: none;
                }
                .subscribe-btn {
                    position: relative;
                    display: block;
                    width: 100%;
                    margin-left: auto;
                    margin-right: auto;
                    padding: 8px 24px;
                    box-sizing: border-box;
                    font-weight: 700;
                    font-size: 17px;
                    text-align: center;
                    text-decoration: none;
                    color: #fff;
                    line-height: 1.88235294;
                    border-radius: 8px;
                    -webkit-tap-highlight-color: rgba(0,0,0,0);
                    background-color: #07c160;
                }
                `}
          </style>
        </script>
        <script type="text/wxtag-template">
          <button type="button" className="subscribe-btn">
            一次性模版消息订阅
          </button>
        </script>
      </wx-open-subscribe>
    </>
  );
}
